﻿@{
    ViewData["Title"] = "Home Page";
}

@section Scripts {
    <script type="text/javascript" src="~/js/Document.js"></script>
    <script type="text/javascript" src="~/js/HomeES6.js"></script>
}

<div id="connectContainer">
    <div class="ms-bgColor-neutralLight welcome">
        <div class="ms-fontSize-xl ms-fontColor-themePrimary">Welcome</div>
        <div class="ms-font-l">This add-in demonstrates how to connect to Microsoft Graph from an add-in.</div>

    </div>
    <div class="welcome-body">
        <p class="ms-font-xs welcome-intro">This add-in performs the following tasks:</p>

        <ul id="file-list" class="ms-List ordered-list">
            <li class="ms-ListItem">
                <span class="ms-ListItem-primaryText">1</span>
                <span class="ms-ListItem-secondaryText">Connects to OneDrive.</span>
                <div class="clearfix"></div>
            </li>
            <li class="ms-ListItem">
                <span class="ms-ListItem-primaryText">2</span>
                <span class="ms-ListItem-secondaryText">Gets the names of the first ten files and folders in OneDrive .</span>
                <div class="clearfix"></div>
            </li>
            <li class="ms-ListItem">
                <span class="ms-ListItem-primaryText">3</span>
                <span class="ms-ListItem-secondaryText">Adds the names to the current document.</span>
                <div class="clearfix"></div>
            </li>
        </ul>
    </div>
</div>
<div id="waitContainer" style="display:none">
    <div class="ms-Spinner"></div>
    <p class="ms-font-l ms-fontColor-themePrimary indentFromPaneEdge centeredText">Please complete the authentication in the pop-up window.</p>
</div>

@* Custom CSS "homefooter" class is fixed to the bottom of the page so it is visible even if the task pane is scrolled. *@
<footer id="footer" class="homefooter ms-bgColor-neutralLight">
    <div class="container">

        @* Button to sign in to get Microsoft Graph data *@
        <p align="center">
            <button id="getUserFileNames" class="popupButton ms-Button ms-Button--primary"><span class="ms-Button-label">Get OneDrive File Names</span></button>
        </p>

    </div>
        <div id="message-area">
        </div>

</footer>


